<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Course List</title>

  <script src="js/vue.global.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>
<div id="app">
  <h2>学院管理</h2>
  <button v-on:click="preAdd">Add course</button>
  <table border="1" width="100%" v-on:load="loadCourses">
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Operation</th>
    </tr>
    <tr v-for="item,index in courses">
      <td>{{index + 1}}</td>
      <td>{{item.name}}</td>
      <td>
        <button v-on:click="delCourse(item.id)">Delete</button>
        <button v-on:click="preEdit(index)">Edit</button>
      </td>
    </tr>
  </table>

  <div class="mask" v-show="dialog">
    <div class="dialog" style="width:300px;height:160px;">
      <div class="title">{{editing?'Edit':'Add'}} course</div>
      <table width="100%">
        <tr>
          <td>Name</td>
          <td><input type="text" v-model="editedCourse.name" placeholder="Input name of course"></td>
        </tr>
      </table>
      <div class="action">
        <button v-on:click="dialog = false">Cancel</button>
        <button v-if="editing" v-on:click="editCourse">Update</button>
        <button v-else v-on:click="addCourse">Save</button>
      </div>
    </div>
  </div>

</div>
<script>
  const app = {
    /**
     * Vue应用对象的数据成员，数据可以绑定到html元素中。各数据成员之间用逗号分开。
     */
    data() {
      return {
        editing: false,
        dialog: false,
        editedCourse: {id:null, code: null, name: null},
        courses: []
      }
    },
    /**
     * Vue应用对象生命周期函数，当对应的html元素装载后执行此程序
     */
    mounted() {
      this.loadCourses();
    },
    /**
     * Vue应用对象的成员函数，各函数成员之间用逗号分开；当HTML事件发生时，对应绑定的方法会被执行。
     */
    methods: {
      // 读取课程列表函数
      loadCourses() {
        axios.get("/college/college").then(res => {
          //res 是返回对象
          this.courses = res.data;
        }).catch(err => {
          alert(err);
        });
      },

      // 弹出课程对话框前处理
      preAdd() {
        // 新增课程前，课程信息置空
        this.editedCourse = {code: null, name: null};
        this.editing = false;
        // 显示对话框
        this.dialog = true;
      },

      //添加课程函数
      addCourse() {
        axios.post('/college/college', this.editedCourse).then(res => {
          this.loadCourses(); // 刷新课程列表
          this.dialog = false; // 关闭对话框
        }).catch(err => {
          let msg = err?.response?.data?.message || err.message || err;
          alert(msg);
        });
      },

      // 修改课程前处理
      preEdit(index) {
        // 复制指定位置的课程到待编辑课程（因为this.editedCourse和对话框输入项绑定的）
        Object.assign(this.editedCourse, this.courses[index]);
        this.editing = true;  // 修改标志
        this.dialog = true;   // 弹出对话框
      },

      // 修改课程
      editCourse() {
        axios.put('/college/college', this.editedCourse).then(res => {
          if (res.data) {
            this.loadCourses();	//当修改成功，刷新页面
          } else {
            alert('修改课程《' + this.editedCourse.name + '》失败');
          }
        }).catch(err => {
          let msg = err?.response?.data?.message || err.message || err;
          alert(msg);
        });
        this.editing = false;
        this.dialog = false;
      },

      //删除课程函数
      delCourse(id) {
        axios.delete('/college/college/' + id).then(res => {
          if (res.data) {
            this.loadCourses();
          } else {
            alert('删除失败');
          }
        }).catch(err => {
          alert('网络请求异常，请重试!');
        });
      }
    }
  }

  Vue.createApp(app).mount('#app');

</script>
</body>
</html>